body{
  margin: 0; /*外边距*/
  padding: 0; /*内边距*/
  background-color: #000; /*背景颜色*/
}
#te {
  top: 50%; /*距上部*/
  left: 50%; 
  width: 80px; /*宽*/
  height: 40px; /*高*/
  text-align: center; /*字体水平居中*/
  line-height: 38px;
  font-size: 5px; /*字体大小*/
  color: #fff;
  text-transform: uppercase; /*字体大写*/
  text-decoration: none; /*字体增加装饰：去除下划线*/
  font-family: sans-serif; /*非衬线体*/
  box-sizing: border-box; /*盒模型大小规则*/
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, 
  #03a9f4, #f441a5, #ffeb3b, #03a9f4); /*渐变背景*/
  border-radius: 60px; /*边框圆角*/
  background-size: 400%; /*背景大小*/
  z-index: 1; /*层叠定位*/
}
#te:hover{
  animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
}
@keyframes animate{
  0%{
    background-position: 0%; /*修改背景定位，实现渐变色炫光*/
  }
  50%{
    background-position: 100%;
  }
  100%{
    background-position: 0%;
  }
}
#te::before{ /*之前添加*/
  content: ''; /*内容*/
  top:-5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  left: -5px;
  right: -5px;
  bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  z-index: -1; 
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
  #f441a5, #ffeb3b, #03a9f4);
  border-radius: 40px;
  background-size: 400%;
  filter: blur(20px); /*过渡：模糊*/
  opacity: 0; /*透明度*/
  transition: 1s; /*过渡时间*/
}
#te:hover::before{
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite; /*注意动画名称统一*/
}

.div4 {
  width: 100px;
  height: 50px;
  overflow: hidden;
  position: relative;
}

.div4::before {
  content: '';
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #e5e3e3;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(transparent, #343434, transparent 30%);
  animation: div4Rotate 4s linear infinite;
}

.div4 > div {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 50%;
  height: 50%;
  background: #ffffff;
  z-index: 2;
  padding: 20px;
  box-sizing: border-box;
}

@keyframes div4Rotate {
  100% {
      transform: rotate(360deg);
  }
}